<template>
    <section class="bg-[#F5F5F5] shadow-md relative">
        <ul class="w-[1200px] bg-white scrollbar-height m-auto flex flex-row justify-start">
            <li class="border">
                <ul class="w-[150px]">
                    <li v-for="(item, index) in NAV" :key="index" @click="state.nav = item"
                        :class="['block text-center text-[14px] py-4 border-b border-gray-200 w-full hover:bg-gray-100 hover:text-[#409eff] focus:outline-none focus:ring-2 focus:ring-[#409eff] focus:text-[#409eff] cursor-pointer', state.nav.value === item.value ? 'text-[#409eff] font-bold' : 'text-black']">
                        {{ item.key }}
                    </li>
                </ul>
            </li>
            <li class="w-full h-full bg-[#f8f8f8]">
                <div v-if="state.nav.value === 0" class="m-3 space-y-4">
                    <div class="p-2 bg-white rounded-lg flex items-center justify-between space-x-8">
                        <div class="flex-1 flex justify-start items-center m-2">
                            <div class="p-2 bg-gray-300 rounded mr-5">{{ _ref.userInfo.name }}</div>
                            <div class="p-2 rounded-lg bg-purple-300">{{ _ref.userInfo.mobile }}</div>
                        </div>
                    </div>
                </div>
                <div v-if="state.nav.value === 1" class="m-3 space-y-4">
                    <el-form ref="ruleFormRef" :model="state.userInfo" class="text-black font-bold" size="large"
                        label-width="auto">
                        <el-form-item label="用户名">
                            <el-input v-model="state.userInfo.name" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="state.userInfo.mobile" placeholder="请输入手机号" />
                        </el-form-item>
                        <el-form-item>
                            <div class="flex-1 flex justify-end">
                                <el-button size="large" type="primary" @click="updateUserInfo(ruleFormRef)">提交</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="state.nav.value === 2" class="m-3 space-y-4">
                    <el-form ref="rulePWDRef" :rules="pwdRules" :model="state.pwd" class="text-black font-bold" size="large"
                        label-width="auto">
                        <el-form-item label="旧密码" prop="password">
                            <el-input type="password" v-model="state.pwd.password" placeholder="请输入旧密码" />
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPassword">
                            <el-input type="password" v-model="state.pwd.newPassword" placeholder="请输入新密码" />
                        </el-form-item>
                        <el-form-item label="确认密码" prop="rePassword">
                            <el-input type="password" v-model="state.pwd.rePassword" placeholder="请再输入新密码" />
                        </el-form-item>
                        <el-form-item>
                            <div class="flex-1 flex justify-end">
                                <el-button size="large" type="primary" @click="updateUserInfoPWD(rulePWDRef)">提交</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </li>
        </ul>
    </section>
</template>

<script lang='ts' setup>
import { FormInstance, UploadInstance, FormRules } from "element-plus";

const NAV = [
    {
        key: '账号信息',
        value: 0
    },
    {
        key: '修改信息',
        value: 1
    },
    {
        key: '修改密码',
        value: 2
    },
]

const router = useRouter()
const state = reactive({
    nav: NAV[0],
    userInfo: {
        name: '',
        mobile: '',
    },
    pwd: {
        password: '',
        newPassword: '',
        rePassword: '',
    }
})
const ruleFormRef = ref<FormInstance>();
const rulePWDRef = ref<FormInstance>();
const pwdRules = reactive<FormRules<typeof state.pwd>>({
    password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 15, message: '密码长度至少为6位数', trigger: 'blur' },
    ],
    rePassword: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        { min: 6, max: 15, message: '密码长度至少为6位数', trigger: 'blur' },
    ],
})
const _ref = ref({
    userInfo: {
        guid: '',
        name: '',
        mobile: '',
    },
})

const initData = async () => {
    const userInfo = Utils.getLocal(Constant.LOGIN_TOKEN_KEY) || {}
    state.userInfo = { ...userInfo }
    _ref.value.userInfo = { ...userInfo }
}

const updateUserInfo = async (form: FormInstance | undefined) => {
    const result = await form?.validate().catch((e: any) => { });
    if (!result) return;
    const { name, mobile } = state.userInfo
    if (!Utils.isPhone(mobile)) {
        return Utils.Modal().msgError('请输入正确的电话号码~');
    }
    const params = {
        guid: _ref.value.userInfo.guid,
        userName: name,
        mobile,
    }
    const [err, res] = await UserService.updateUserInfo(params);
    if (err) {
        return Utils.Modal().msgError(err);
    }
    form?.resetFields()
    Utils.Modal().msgSuccess('信息更新成功~')
    Utils.loginOut()
    router.replace('/')
}

const updateUserInfoPWD = async (pwd: FormInstance | undefined) => {
    const result = await pwd?.validate().catch((e: any) => { });
    if (!result) return;
    const { password, newPassword, rePassword } = state.pwd
    if (newPassword !== rePassword) {
        return Utils.Modal().msgError('两次密码不一致~');
    }
    const params = {
        guid: _ref.value.userInfo.guid,
        password,
        newPassword,
        rePassword,
    }
    const [err, res] = await UserService.updateUserInfo(params);
    if (err) {
        return Utils.Modal().msgError(err);
    }
    pwd?.resetFields()
    Utils.Modal().msgSuccess('密码修改成功~')
    Utils.loginOut()
    router.replace('/')
}

initData()
</script>

<style lang='scss' scoped></style>